<template>
  <view :class="classNameList">
    <scroll-view id="x-tabs" class="_content" scroll-with-animation :scroll-left="scrollLeft" :scroll-x="isScroll" :style="{'background': background}">
      <view :class="{'_ul':true,'is-BackImage':isBackImage}">
        <block v-for="(item, index) in list" :key="item[label]">
          <view
            class="_li"
            :class="[index === selectedIndex ? '_active' : '' , index === selectedIndex && color ==='#ffffff' ? '_active_white' : '']"
            :style="styles"
            @click="onChange(index)"
          >
            {{item[label]}}
            <block v-if="underline">
              <view class="_underline" :style="{background: underlineColor,bottom: underlineTop+'rpx'}" />
            </block>
          </view>
        </block>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'XTabs',
  components: {},
  props: {
    type: {
      type: String,
      default: 'default' // default | home |
    },
    size: {
      type: String,
      default: 'medium'
    },
    fixed: {
      type: Boolean,
      default: false
    },
    background: {
      type: String,
      default: 'transparent'
    },
    active: {
      type: [Number, String],
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    },
    // data key
    label: {
      type: String,
      default: 'name'
    },
    // 选中下划线
    underline: {
      type: Boolean,
      default: true
    },
    // 分割线
    divider: {
      type: Boolean,
      default: false
    },
    // 滚动
    scroll: {
      type: Boolean,
      default: false
    },
    //
    flex: {
      type: Boolean,
      default: false
    },
    styles: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    isBackImage: {
      type: Boolean,
      default: false
    },
    underlineColor: {
      type: String,
      default: ''
    },
    underlineTop: {
      type: String,
      default: ''
    }

  },
  data() {
    return {
      isFixed: false,
      scrollLeft: 0,
      selectedIndex: 0,
      info: null
    };
  },
  computed: {
    // class列表
    classNameList() {
      const name = ['x-tabs'];
      if (this.isFixed) {
        name.push('is-fixed');
      }
      if (this.divider) {
        name.push('is-divider');
      }
      if (this.isScroll) {
        name.push('is-scroll');
      } else {
        name.push('is-flex');
      }
      if (this.flex) {
        name.push('is-flex');
      }
      name.push(`is-${this.type}`);
      name.push(`is-${this.size}`);
      return name.join(' ');
    },
    // 是否为滚动形式
    isScroll() {
      return this.scroll || this.list.length > 4;
    }
  },
  watch: {
    active: {
      handler(val) {
        if (val === 'detail') {
          val = 0;
        }
        if (val === 'sku') {
          val = 1;
        }
        this.selectedIndex = val;
      },
      immediate: true
    }
  },
  created() {},
  mounted() {
    this.getTabsInfo();
    /* this.$nextTick(() => {
        this.setOffset()
      })*/
  },
  methods: {
    getTabsInfo() {
      const query = uni.createSelectorQuery().in(this);
      query.select('#x-tabs').boundingClientRect(data => {
        this.info = data;
      }).exec();
    },
    onChange(index) {
      if (this.selectedIndex === index) {
        this.$emit('sort');
      }
      if (this.selectedIndex === index) return;
      this.selectedIndex = index;
      this.$emit('update:active', this.selectedIndex);
      this.$emit('change', this.selectedIndex);
      // 滚动模式下，点击之后计算位置，进行动态滚动设置
      if (this.isScroll) {
        this.$nextTick(() => {
          this.setOffset();
        });
      }
    },
    // 设置位置
    setOffset() {
      const query = uni.createSelectorQuery().in(this);
      query.selectAll('._li').boundingClientRect(data => {
        // 选中后的样式有变化，宽度不一样了，所以重新计算右侧位置数据
        let offsetLeft = 0;
        data.forEach((item, index) => {
          if (index < this.selectedIndex) {
            offsetLeft += item.width;
          }
        });
        const item = data[this.selectedIndex];
        this.scrollLeft = (offsetLeft + item.width / 2) - (this.info.width / 2);
      }).exec();
    }
  }
};
</script>

<style lang="scss">
  .x-tabs{
    // 分割线
    &.is-divider{
      ._li{
        position: relative;
        &:after{ content: ''; position: absolute; width: 2px; height: 22px; background-color: #E6E6E6; right: 0; top: 50%; transform: translate3d(0, -50%, 0);}
        &:last-child:after{ display: none;}
      }
    }
    // flex
    &.is-flex{
      ._content ._li{ flex: 1; padding: 0;}
    }
    // scroll
    &.is-scroll{
      ._content ._li{ flex-shrink: 0;}
    }
    // 大号
    &.is-large{
      ._content{ height: $uni-height-size-lg; line-height: $uni-height-size-lg; font-size: $uni-font-size-lg;}
    }
    // 中号
    &.is-medium{
      ._content{ height: $uni-height-size-base; line-height: $uni-height-size-base; font-size: $uni-font-size-base;}
    }
    // 小号
    &.is-small{
      ._content{ height: $uni-height-size-sm; line-height: $uni-height-size-sm; font-size: $uni-font-size-sm;}
    }
    ._content{
      color: #8A8A8A;
      ._ul{ display: flex; align-items: center;}
      ._li{
        text-align: center; padding: 0 30px; position: relative;
        &._active{
          font-weight: bold;
          color: $uni-color-primary;
          ._underline{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 70px; height: 6px;  background: $uni-color-primary; border-radius: $uni-border-radius-sm;}
        }
        &._active_white{
          color: #FFFFFF;
          ._underline{ position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); width: 70px; height: 6px; background: #FFFFFF; border-radius: $uni-border-radius-sm;}
        }
        ._item{ position: relative;}
      }
    }
    .is-BackImage{
      background-image: cdn('/images/buy-gift-tab.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
</style>
